// (function(){

    let box = document.querySelector('.box')

    let socket = null

    let id = null

    let arrDiv = []//所有格子div

    let xSum = 60// x轴40个格子
    let ySum = 60// y轴40个格子

    let sum = 0

    let userName = null

    let setInt = null

    let data = {
        user : [
            {
                body : [10, 11]
            }
        ],
        food : [100]
    }

    // 初始化贪吃蛇格子
    function init(){
        box.innerHTML = ''
        arrDiv = []
        sum = xSum * ySum
        for(let i = 0;i < sum;i++){
            let div = document.createElement('div')
            arrDiv.push(div)
            div.innerText = i + 1
            box.appendChild(div)
        }
        initSize()
    }

    function initSize(){
        // 画格子
        let itemWidth = box.clientWidth / xSum
        let itemHeight = box.clientHeight / ySum
        arrDiv.forEach(n => {
            n.style.width = itemWidth + 'px'
            n.style.height = itemHeight + 'px'
        })
    }

    // 清空className
    function drawClaer(){
        arrDiv.forEach(n => {
            n.className = ''
        })
    }

    // 画画
    function draw(){
        drawClaer()

        data.food.forEach(n => {
            arrDiv[n].className = 'food'
        })
        
        data.user.forEach(n => {

            let isId = n.id == id

            n.body.forEach(c => {
                arrDiv[c].className = isId ? 'snake' : 'n-snake'
            })
    
            arrDiv[n.body[n.body.length - 1]].className = isId ? 'head' : 'n-head'

            arrDiv[n.body[n.body.length - 1]].innerText = n.userName
        })
    }

    start('请输入你的名称')

    function start(str){
        userName = prompt(str)
        userName = userName.replace('<', '').replace('>', '')
        if (userName.trim() == '' || userName.length < 2 || userName.length > 6) {
            return start('名称必须在2-6位，重新输入')
        }
        openSocket('/p')
    }


    function openSocket(path){
    
        socket = io(path);

        socket.on('setId', (data) => {
            id = data
        })

        socket.emit('setName', userName)

        socket.on('draw', (d) => {

            let s = ''

            d.user.forEach(n => {
                s += `<div>${n.userName}：${n.body.length}</div>`
            })

            document.querySelector('.the-charts').innerHTML = s

            data = d
            draw()
        })
    
        socket.on('disconnect', ()=>{
            location.reload()
        });
    }

    function stop(){
        clearInterval(setInt)
    }

    document.onkeydown = function (e){
        if (e.key == 'w' || e.keyCode == 38) {
            socket.emit('course', -xSum)
        }else if(e.key == 's' || e.keyCode == 40){
            socket.emit('course', xSum)
        }else if(e.key == 'a' || e.keyCode == 37){
            socket.emit('course', -1)
        }else if(e.key == 'd' || e.keyCode == 39){
            socket.emit('course', 1)
        }else if(e.keyCode == 32){
            socket.emit('accelerate')
        }
    }
    
    const debounce = (fn, delay) => {
        let timer;
        return function() {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn();
            }, delay);
        }
    };

    const cancalDebounce = debounce(initSize, 200);

    window.onresize = function(){
        cancalDebounce()
    }


    init()
    draw()
// }())